<template>
  <!--存折照片上传-->
  <view class="list-box img-upload">
    <view class="list-item">
      <view class="list-title">
        <text class="text-title-name">请上传存折照片</text>
      </view>
      <view class="material-item">
        <view class="material-first-level">
          <view class="sub-materail-item">
            <view class="img-list img-list_padding">
              <view :class="['upload-box']"
                v-for="(imgItem, imgIndex) in imageList" :key="imgIndex">
                <image class="upload-image" :src="imgItem.url" @tap="previewImage(imgItem)"></image>
                <image class="close-image" :src="closeIcon" @tap="deleteImg(imgIndex)"></image>
              </view>
              <view
                :class="['upload-box','empty']"
                @tap="addImg()">
                <image :src="cameraIcon" mode="widthFix" class="add-image"></image>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { UPLOAD, vsCode } from '@/utils/img-upload.js'
import cameraIcon from '@/static/images/camera.png'
import closeIcon from '@/static/images/close.png'
export default {
  props: {
    accounts: {
      type: Object,
      default: function () {
        return {}
      },
    },
    bizCode: {
      type: String,
      default: '',
    },
    policyNos: {
      type: String,
      default: '',
    },
    // 图片的来源 相册和摄像头
    sourceType: {
      type: Array,
      default: function () {
        return ['album', 'camera']
      },
    },
  },
  data() {
		return {
      cameraIcon,
      closeIcon,
      imageList: []
		}
	},
  computed: {
	},
  mounted(){
  },
  methods: {
    // 删除图片
    deleteImg(imgIndex) {
			let file = this.imageList[imgIndex]
			if (file.fileId) {
				this.$request({
					url: this.$url.imageDel,
					method:'POST',
					data: { fileId: file.fileId},
				}).then(res => {
					this.imageList.splice(imgIndex, 1)
				})
			}
		},
		// 上传图片
    addImg() {
      let policyNosAry = this.policyNos ? this.policyNos.split(',') : []
      let bizCode = this.bizCode?this.bizCode: policyNosAry.length ? policyNosAry[0] : new Date().getTime();// 请注意bizcode不能为空，否则会导致上传obs的路径中有双斜杠//从而影像系统取不到影响
      let formData = { bizClient: 'csp', bizCode: bizCode, imageType: '604' }
      UPLOAD.imgUpload({
        formData,
        sourceType: this.sourceType,
        count: 9,
        compressType: 2,
      }).then((res) => {
        res.length && res.map((data) => {
          if (data) {
            let { filename, fileId, imageFormate } = data
            const obj = {
              filename,
              fileId,
              imageFormate,
            }
            this.getImage(obj)
            this.imageList.push(obj)
          }
        })
			})
		},
    getImage(item) {
      if (!item.fileId) return
      vsCode
        .imgCode({
          url: this.$url.imageDownload,
          method: 'Get',
          data: { fileId: item.fileId },
        })
        .then((res) => {
          let blob = new Blob([res.data]) // 返回的文件流数据
          this.$public.blobToBase64(blob, (dataurl) => {
            this.$set(item, 'url', dataurl) // 转化为路径
            this.$forceUpdate()
          })
        })
    },
    // 图片预览
    previewImage(item) {
      this.$Hola.previewImage({
        current: item.url, // 当前显示图片的http链接
        urls: [item.url], // 需要预览的图片http链接列表
      })
    },
    // 返回图片列表
    getImgList() {
      return this.imageList.map(u => {
        let newItem = {
          fileId: u.fileId,
          imageFormate: u.imageFormate,
          filename: u.filename,
        }
        return newItem
      })
    }
  },
}
</script>
<style lang="scss" scoped src="./index.scss">
</style>
